/*
 * @Date: 2022-01-09 18:14:59
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-09 20:57:12
 * @FilePath: \project-work\src\components\comments.js
 */
import classNames from 'classnames'
import { Component } from 'react'
import '../css/index.css'
export default class Comment extends Component {
  state = {
    // 当前用户
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png'
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content:
          '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
        collect: false
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar:
          'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content:
          '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
        collect: true
      },
      {
        id: 102,
        name: '清风徐来',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content:
          '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
        collect: false
      }
    ],
    content: ''
  }
  // ~受控组件
  changeContent = e => {
    const { value } = e.target
    if (value.length > 100) return
    this.setState({
      content: value
    })
  }

  // ~添加评论
  AddContent = () => {
    const { content, comments, user } = this.state

    // ~判断输入框是否填入内容 否则弹窗提示
    if (!content.length) return alert('请输入内容！')

    // ~运用some(处理复杂数据类型，若相等则返回布尔值) 来判断输入的内容是否与评论区的内容重复 否则弹窗提示
    if (
      comments.some(item => {
        return item.content === content
      })
    )
      return alert('评论已经存在！')
    if (content === comments.content) return alert('评论已经存在！')
    // ~若上面条件不满足 则 更新状态 并且渲染评论数据
    this.setState({
      comments: [
        {
          id: Math.random(),
          content,
          time: new Date().toLocaleString('chinese', { hour12: false }),
          ...user
        },
        ...comments
      ],
      content: ''
    })
  }
  // ~ 收藏功能
  collect = id => {
    const { comments } = this.state
    // ~更新状态
    this.setState({
      // ~更新comments
      comments: comments.map(item => {
        // ~ map映射新对象 if(评论列表的id===点击传入的id) return 对象{...item (结构对象),把collect取反}
        if (item.id === id) {
          return {
            ...item,
            collect: !item.collect
          }
          // ~如果 未找到 为满足条件则返回原对象！
        } else {
          return item
        }
      })
    })
  }

  // ~删除功能！
  delContent = id => {
    // const { comments } = this.state
    this.setState({
      // !filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。  filter() 不会改变原始数组。
      comments: this.state.comments.filter(item => item.id !== id)
    })
  }

  render() {
    const { user, comments, content } = this.state
    return (
      <div className="comments">
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea
            placeholder="爱发评论的人，运气都很棒"
            value={content}
            onChange={this.changeContent}
          ></textarea>
          <div className="foot">
            <div className="word">{content.length}/100</div>
            <div className="btn" onClick={this.AddContent}>
              发表评论
            </div>
          </div>
        </div>
        <h3 className="comm-head">
          热门评论<sub>(5)</sub>
        </h3>
        <ul className="comm-list">
          {comments.map(item => (
            <li className="comm-item" key={item.id}>
              <div
                className="avatar"
                style={{ backgroundImage: `url(${item.avatar})` }}
              ></div>
              <div className="info">
                <p className={classNames('name', { vip: item.vip })}>
                  {item.name}
                  {item.vip ? (
                    <img
                      alt=""
                      src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
                    />
                  ) : null}
                </p>
                <p className="time">
                  {item.time}
                  <span
                    className={`iconfont icon-collect${
                      item.collect ? '-sel' : ''
                    }`}
                    // !如果要传值 必须嵌套箭头函数
                    onClick={() => {
                      this.collect(item.id)
                    }}
                  ></span>
                  {item.name === user.name ? (
                    // !如果要传值 必须嵌套箭头函数
                    <span
                      className="del"
                      onClick={() => {
                        this.delContent(item.id)
                      }}
                    >
                      {' '}
                      删除
                    </span>
                  ) : null}
                </p>
                <p>{item.content}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
